import React from 'react';
import {List, View, NavBar, Container, Button} from 'amazeui-touch';
import {connect} from 'react-redux';
import Action from '../store/actions';
import {bindActionCreators} from 'redux';
import {hashHistory} from 'react-router'
import {Link} from 'react-router';
import {totalPrice, deleteProduct} from '../util';

@connect(
    state => ({...state}),
    dispatch => bindActionCreators(Action, dispatch)
)
export default class Shop extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            clickCount: 1
        };
    }

    handleSubmit(e) {
        e.preventDefault();
        hashHistory.push('/login');
    }

    handleRemove(id) {
        deleteProduct(id);
        hashHistory.push('/');
    }

    render() {
        if (localStorage.getItem("userName") === null) {
            return (
                <View>
                    <NavBar
                        amStyle="primary"
                        title="购物车"
                    />
                    <div className="cartFont" onClick={this.handleSubmit.bind(this)}>未登录，点击登陆</div>
                </View>
            );
        } else {
            if (localStorage.getItem("ShoppingCart") === null) {
                return (
                    <View>
                        <NavBar
                            amStyle="primary"
                            title="购物车"
                        />
                        <div className="cartFont">购物车为空</div>
                    </View>
                );
            } else {
                const cart = JSON.parse(localStorage.getItem("ShoppingCart")).showGoodsMsg;
                const price = totalPrice(cart);
                return (
                    <View>
                        <NavBar
                            amStyle="primary"
                            title="购物车"
                        />
                        <Container scrollable>
                            <List>
                                {cart.map((item, index) => {
                                    const imgSrc = "http://10.0.1.24:8080/pic/" + item.image;
                                    return (
                                        <List.Item
                                            key={index}
                                            title={item.name}
                                            media={<img width="100" src={imgSrc}/>}
                                            after={
                                            <Button
                                            amStyle="alert"
                                            amSize="xs"
                                            onClick={this.handleRemove.bind(this,item.id)}>
                                            移除
                                            </Button>
                                            }
                                            desc={"数量:"+item.number}
                                            subTitle={<div></div>}
                                        />
                                    );
                                })}
                            </List>
                            <div className="purchase">
                                <Button
                                    hollow
                                    amStyle="primary"
                                ><Link
                                    to={{pathname: `/PersonDetail`, query: {price: price}}}>
                                    提交订单
                                </Link>
                                </Button>
                            </div>
                        </Container>
                    </View>
                );
            }
        }
    }
}
